import interact from "../src/interact";
import { dom, hide, show } from "../src/dom";

describe('交互控件单元测试', () => {
    it('loading test', () => {
        interact.loading()
        expect(dom('#loading-modal')).not.toBeNull()
        expect(dom('#loading-modal').style.display).not.toBe('none')

        interact.loading('加载中...')
        expect(dom('.s-loading-txt')).not.toBeNull()
        expect(dom('.s-loading-txt').innerHTML).toBe('加载中...')

        interact.loading({ theme: 'primary', fade: true, msg: '加载中...' });
        expect(dom('.s-loading-block').className).toMatch(/primary/);

        interact.loading(false)
        expect(dom('#loading-modal')).not.toBeNull()
        expect(dom('#loading-modal').style.display).toBe('none')

        interact.loading()
        hide("#loading-modal")
        expect(dom('#loading-modal').style.display).toBe('none')

        show("#loading-modal")
        expect(dom('#loading-modal').style.display).not.toBe('none')

    })

    it('confirm test', () => {

        interact.confirm({ msg: '测试弹窗信息' })
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).not.toBe('none')
        expect(dom('.s-alert-context').innerHTML).toContain('测试弹窗信息')
        expect(dom('.s-alert-title')).toBeNull()
        expect(dom('.alert-btns')).toBeNull()



        interact.confirm({ msg: '测试弹窗信息', title: '弹窗标题' })
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).not.toBe('none')
        expect(dom('.s-alert-context').innerHTML).toContain('测试弹窗信息')
        expect(dom('.s-alert-title').innerHTML).toContain('弹窗标题')
        expect(dom('.alert-btns')).toBeNull()

        interact.confirm({ msg: '测试弹窗信息2', title: '弹窗标题2', confirmText: '确定' })
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).not.toBe('none')
        expect(dom('.s-alert-context').innerHTML).toContain('测试弹窗信息2')
        expect(dom('.s-alert-title').innerHTML).toContain('弹窗标题2')
        expect(dom('.alert-btns')).not.toBeNull()

        dom('.alert-confirm-btn').click()
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).toBe('none')

        interact.confirm({ msg: '测试弹窗信息2', title: '弹窗标题2', confirmText: '确定', cancelText: '取消' })
        expect(dom('.alert-btns').childNodes.length).toBe(2)
        expect(dom('#alert-modal')).not.toBeNull()

        dom('.alert-cancel-btn').click()
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).toBe('none')

        interact.alert({ msg: '配置按钮的弹窗', btnText: '我知道了', btnType: 'confirm' })
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).not.toBe('none')
        expect(dom('.alert-confirm-btn').innerHTML).toContain('我知道了')
        dom('.alert-confirm-btn').click()
        expect(dom('#alert-modal')).not.toBeNull()
        expect(dom('#alert-modal').style.display).toBe('none')

        expect(dom('#toast-modal')).toBeNull()

        interact.toast('toast消息')
        expect(dom('#toast-modal')).not.toBeNull()
        expect(dom('#toast-modal').style.display).not.toBe('none')

        interact.toast('toast消息2')
        expect(dom('.s-toast-block .w_100').innerHTML).toContain('toast消息2')


    })
})


describe('alertHTML', () => {
    it('should reject if the argument is not a string or an object', () => {
        expect(interact.alertHTML(123)).rejects.toThrow('the argument of alertHTML must be a string or an object');
        expect(interact.alertHTML(null)).rejects.toThrow('the argument of alertHTML must be a string or an object');
    });

    it('should create a new modal with the provided HTML when a string is passed', () => {
        interact.alertHTML('<p>Hello, world!</p>');
        const modal = document.querySelector('#rich-modal');
        expect(modal).not.toBeNull();
        expect(modal.innerHTML).toContain('<p>Hello, world!</p>');
    });

    it('should create a new modal with the provided HTML when an object is passed', () => {
        interact.alertHTML({ closeOnClickMask: true, html: '<p>Hello, world!</p>' });
        const modal = document.querySelector('#rich-modal');
        expect(modal).not.toBeNull();
        expect(modal.innerHTML).toContain('<p>Hello, world!</p>');

        dom("#rich-modal .s-mask").click()

        expect(dom('#rich-modal')).not.toBeNull();
        expect(dom('#rich-modal').style.display).toBe('none');

    });

    it('create a new modal with the provided HTML  when an object with String closeOnClicks is passed', () => {
        interact.alertHTML({
            closeOnClickMask: true,
            html: `<div class='s-bg s-primary'>
            <p>测试弹出html内容</p>
            <button name="button" id="closerich" class="s-btn primary r_xsmall no-b" data-id="100">点击关闭</button>
            </div>`,
            closeOnClicks: '#closerich'
        }).then((res) => {
            expect(res.id).toBe('100')
        })

        const modal = document.querySelector('#rich-modal');
        expect(modal).not.toBeNull();
        expect(modal.innerHTML).toContain('点击关闭');
        expect(dom('#closerich')).not.toBeNull();

        
        dom("#closerich").click();
        expect(dom('#rich-modal')).not.toBeNull();
        expect(dom('#rich-modal').style.display).toBe('none');

    });

    
    it('create a new modal with the provided HTML  when an object with Array closeOnClicks is passed', () => {
        interact.alertHTML({
            closeOnClickMask: true,
            html: `<div class='s-bg s-primary'>
            <p>测试弹出html内容</p>
            <button name="button" id="closerich" class="s-btn primary r_xsmall no-b" data-id="100">点击关闭</button>
            <button name="button" id="closerich2" class="s-btn primary r_xsmall no-b" data-id="102">点击关闭2</button>
            </div>`,
            closeOnClicks: ['#closerich', '#closerich2']
        }).then((res) => {
            expect(res.id).toBe('102')
        })

        const modal = document.querySelector('#rich-modal');
        expect(modal).not.toBeNull();
        expect(modal.innerHTML).toContain('点击关闭2');
        expect(dom('#closerich2')).not.toBeNull();

        dom("#closerich2").click();
        expect(dom('#rich-modal')).not.toBeNull();
        expect(dom('#rich-modal').style.display).toBe('none');

    });


    // 更多的测试用例...
});